<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义style</title>
    <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.prod.js"></script>
</head>
<style>
    p {
        padding: 20px;
        border: 1px dashed #999;
        transition: all 0.3s ease; /* 添加过渡效果 */
    }
    label {
        padding: 0 10px;
    }
</style>
<body>
    <div id="app">
        <label>字号：</label>
        <select v-model="fontSize">
            <option v-for="i in 15" :value="`${i + 11}px`">{{ i + 11 }}px</option>
        </select>
        <label>字体：</label>
        <select v-model="fontFamily">
            <option value="微软雅黑">微软雅黑</option>
            <option value="宋体">宋体</option>
            <option value="黑体">黑体</option>
            <option value="楷体">楷体</option>
        </select>
        <label>颜色：</label>
        <input type="color" v-model="color">
        <label>字重：</label>
        <select v-model="fontWeight">
            <option v-for="i in 9" :value="`${i * 100}`">{{ i * 100 }}</option>
        </select>
        <label>行间距：</label>
        <input type="number" v-model="lineHeight" style="width: 50px;"> px
        <label>字间距：</label>
        <input type="number" v-model="letterSpacing" style="width: 50px;"> px
        <label>首行缩进：</label>
        <input type="number" v-model="textIndent" style="width: 50px;"> em
        <p :style="styleObject">
           那是一个阳光明媚的清晨，我站在车站的候车室里，心中满是对即将开始的旅程的期待。然而，我的目光却被不远处的一个身影深深吸引。那是一位父亲，他正送自己的儿子踏上远行的列车。
           
           父亲穿着一件深色的外套，岁月在他的脸上刻下了深深的痕迹，但他的眼神中却透着一种坚定和温柔。儿子背着一个大大的行囊，显得有些笨拙，父亲则紧紧地跟在后面，不时地叮嘱着什么。我虽然听不到他们的对话，但从儿子微微点头的动作中，我能感受到那份浓浓的父爱。
           
           列车即将进站，父亲停下脚步，从口袋里掏出一张皱巴巴的手帕，仔细地擦拭着儿子额头上的汗珠。儿子抬起头，望着父亲，眼中闪过一丝不舍。父亲微微一笑，拍了拍儿子的肩膀，仿佛在说：“别担心，我会在这里等你回来。”那一刻，阳光洒在父亲的脸上，他的笑容温暖而明亮，如同一盏灯，照亮了儿子前行的道路。
           
           列车缓缓驶入站台，儿子转身走向车厢，父亲则站在原地，目送着他。儿子走进车厢，回头望了一眼父亲，父亲也立刻回应，用力地挥了挥手。列车开始启动，父亲的身影逐渐变得模糊，但他依然站在那里，直到列车消失在远方。
           
           我站在一旁，望着父亲那渐渐远去的背影，心中涌起一股莫名的感动。那背影，是父亲对儿子深深的牵挂，是无声的爱与支持。它让我想起了自己的父亲，想起了那些他为我默默付出的日子。父亲总是不善言辞，但他用行动告诉我，他的爱从未缺席。
           
           在人生的道路上，我们或许会遇到各种困难和挑战，但只要想起那个温暖的背影，我们就会充满力量。
        </p>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    fontSize: '16px', // 默认字号
                    fontFamily: '微软雅黑', // 默认字体
                    color: '#000000', // 默认颜色
                    fontWeight: '400', // 默认字重
                    lineHeight: 1.5, // 默认行间距
                    letterSpacing: 0, // 默认字间距
                    textIndent: 2 // 默认首行缩进
                };
            },
            computed: {
                styleObject() {
                    return {
                        color: this.color,
                        fontSize: this.fontSize,
                        fontFamily: this.fontFamily,
                        fontWeight: this.fontWeight,
                        lineHeight: this.lineHeight,
                        letterSpacing: `${this.letterSpacing}px`,
                        textIndent: `${this.textIndent}em`
                    };
                }
            }
        }).mount("#app");
    </script>
</body>
</html>